<template>
  <Card id="speakbox">
    <Row type="flex" justify="center" class="code-row-bg">
      <Col :md="24" :xs="22">
        <Divider orientation="left">最新留言</Divider>
        <Timeline pending>
          <TimelineItem v-for="(v1,i1) in speaks_list" :key="v1.i1" class="timeitem" v-if="i1<4">
            <div class="header">
              <Avatar class="avatar" icon="ios-person" size="large" :src="src+users_list[v1.user_id].avatar"/>
              <div class="user">
                <p class="name">{{users_list[v1.user_id].name}}</p>
                <p class="time">{{v1.time}}</p>
              </div>
            </div>
            <div class="content">
              {{v1.text}}
            </div>
          </TimelineItem>
          <TimelineItem><router-link to="/speak">查看更多</router-link></TimelineItem>
        </Timeline>
      </Col>
    </Row>
  </Card>
</template>

<script>
  export default {
    name: 'SpeakBox',
    data() {
      return {
        src:this.$src+'tp5_jzt-blog_server/public/uploads/avatar/',
        users_list:'',
        speaks_list:'',
      }
    },
    components: {

    },
    methods: {
      showdata(){
        this.$axios({
          method: 'post',
          url: 'tp5_jzt-blog_server/public/index.php/home/speak',
          data: {
            speak_data: this.speak_data
          },
        }).then((res) => {
          console.log('评论列表数据：',res.data);
          this.speaks_list=res.data.speaks_list;
          this.users_list=res.data.users_list;
          // console.log(this.speaks_list);
          // console.log(this.users_list);
        }).catch((error) => {
          console.log(error)
        })
      },
    },
    created() {
      this.showdata();
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #speakbox{
    margin: 15px;
  }
  .timeitem:hover{
    color: #2D8CF0;
  }
  .timeitem .header{
    margin: 5px;
    display: flex;
    justify-items: center;
    align-content: center;
  }
  .timeitem .user{
    margin-left: 15px;
  }
  .timeitem .user .name{
    text-align: center;
    font-size: 16px;
  }
  .timeitem .user .time{
    text-align: center;
    font-size: 10px;
  }
  .timeitem .content{
    padding: 5px;
    font-size: 18px;
  }
</style>
